@import url('./_environment.pcss');

@layer firstLevelState {
  .NavMenu {
    ul {
      @media (width <= 1440px) {
        overflow-x: auto;

        li {
          flex: 0 0 auto;

          &.Logo {
            order: -1;
          }
        }
      }
    }
  }

  .Advantages {
    @container (width < 850px) {
      @mixin flex {
        flex-flow: row wrap;
        gap: 0 50px;
        justify-content: center;

        > * {
          flex: 0 0 300px;
        }
      }
    }

    @container (width <= 650px) {
      > * {
        flex: 0 1 auto;
      }
    }
  }

  @container (width <= 650px) {
    .Advantage {
      grid-template-columns: auto;
      grid-template-rows: auto;
      justify-items: center;
      text-align: center;

      img {
        margin-bottom: 15px;
      }
    }
  }
  @media (width <= 1240px) {
    .BlockWithTwoColumns {
      display: block;
    }
  }
}
